<template>
  <div class="app-container">
    <el-card style="margin-bottom: 10px">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        class="no-margin-form"
        label-width="80px"
        label-position="right"
      >
        <el-form-item
          label="合同名称"
          prop="name"
          style="display: inline-flex; align-items: center"
        >
          <el-input
            v-model="queryParams.name"
            placeholder="请输入合同名称"
            clearable
            style="width: 160px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item
          label="合同类型"
          prop="type"
          style="display: inline-flex; align-items: center"
        >
          <el-select
            v-model="queryParams.type"
            clearable
            placeholder="请选择"
            style="width: 160px"
            @change="handleQuery"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="合同所属公司"
          prop="belongingCompanyId"
          label-width="96px"
          style="display: inline-flex; align-items: center"
        >
          <el-select
            v-model="queryParams.belongingCompanyId"
            clearable
            placeholder="请选择"
            style="width: 160px"
            @change="
              handleQuery,
                getlistContractCategorybyBelongingCompanyId(
                  queryParams.belongingCompanyId
                )
            "
          >
            <el-option
              v-for="item in belongingCompanyList"
              :key="item.belongingCompanyId"
              :label="item.name"
              :value="item.belongingCompanyId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="合同类别"
          prop="contractCategoryId"
          style="display: inline-flex; align-items: center"
        >
          <el-select
            v-model="queryParams.contractCategoryId"
            clearable
            placeholder="请选择"
            style="width: 160px"
            @change="handleQuery"
          >
            <el-option
              v-for="item in contractCategoriesList"
              :key="item.contractCategoryId"
              :label="item.name"
              :value="item.contractCategoryId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="签约方"
          prop="partyString"
          style="display: inline-flex; align-items: center"
        >
          <el-input
            v-model="queryParams.partyString"
            placeholder="请输入签约方"
            style="width: 160px"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item
          label="合同编码"
          prop="code"
          style="display: inline-flex; align-items: center"
        >
          <el-input
            v-model="queryParams.code"
            placeholder="请输入合同编码"
            clearable
            style="width: 160px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item
          label="合同归属年份"
          prop="belongingYear"
          label-width="96px"
          style="display: inline-flex; align-items: center"
        >
          <el-date-picker
            v-model="queryParams.belongingYear"
            type="year"
            :editable="false"
            placeholder="选择年份"
            format="yyyy"
            style="width: 160px"
            value-format="yyyy"
            @change="handleQuery"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="合同生效日期"
          prop="effectiveTime"
          label-width="96px"
          style="display: inline-flex; align-items: center"
        >
          <el-date-picker
            clearable
            v-model="queryParams.value"
            type="daterange"
            :editable="false"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            range-separator="至"
            value-format="yyyy-MM-dd"
            placeholder="请选择合同生效日期"
            @change="handleQuery"
            style="width: 280px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="开票状态"
          prop="state"
          style="display: inline-flex; align-items: center"
        >
          <el-select
            v-model="queryParams.state"
            style="width: 160px"
            clearable
            placeholder="请选择"
            @change="handleQuery"
          >
            <el-option
              v-for="item in stateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="收(付)款类型"
          prop="collectionAndPaymentTypes"
          label-width="96px"
          style="display: inline-flex; align-items: center"
        >
          <el-select
            v-model="queryParams.collectionAndPaymentTypes"
            clearable
            placeholder="请选择"
            @change="handleQuery"
            style="width: 160px"
          >
            <el-option
              v-for="item in PaymentType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="收(付)款状态"
          prop="collectionAndPaymentState"
          label-width="96px"
          style="display: inline-flex; align-items: center"
        >
          <el-select
            v-model="queryParams.collectionAndPaymentState"
            clearable
            placeholder="请选择"
            style="width: 160px"
            @change="handleQuery"
          >
            <el-option
              v-for="item in collectionAndPaymentStateLiast"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
            style="width: 85px; height: 40px"
            >搜索</el-button
          >
          <el-button
            icon="el-icon-refresh"
            @click="resetQuery"
            style="width: 85px; height: 40px"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <stylizedTable
        title="合同台账"
        :buttonList="buttonList"
        :statusColor="true"
        :selector="true"
        :ordinal="true"
        :queryParams="queryParams"
        :loading="loading"
        :total="total"
        :tableItem="tableItem"
        :tableData="ContractList"
        @reset="getList"
        @getList="getList"
        @handleSelectionChange="handleSelectionChange"
      >
        <template #slot-buttonList>
          <el-upload
            :action="fileUrl"
            :on-success="uploadFileHandleAdd"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :headers="headers"
          >
            <el-button
              style="height: 40px; margin-left: 10px"
              icon="el-icon-circle-plus-outline"
              type="primary"
              >导入合同</el-button
            >
          </el-upload>
        </template>
      </stylizedTable>
    </el-card>

    <!-- 添加或修改合同对话框 -->
    <el-dialog
      title="合同详情"
      :visible.sync="open"
      width="90%"
      append-to-body
      :close-on-click-modal="false"
    >
      <div>
        <div
          style="
            margin-bottom: 20px;
            border-bottom: 1px solid rgb(223, 228, 237);
            padding-bottom: 3px;
          "
        >
          <div class="tit_box">
            <div :class="aciton == 0 ? 'act_tit' : 'tit'" @click="aciton = 0">
              合同详情
            </div>
            <div :class="aciton == 1 ? 'act_tit' : 'tit'" @click="aciton = 1">
              收付款计划详情
            </div>
            <div
              :class="aciton == index + 2 ? 'act_tit' : 'tit'"
              @click="aciton = index + 2"
              v-for="(item, index) in contractAppendicesList"
            >
              附件-{{ index + 1 }}
            </div>
          </div>
        </div>
        <div v-show="aciton == 0" style="display: flex">
          <div style="width: 50%; background-color: rgb(240, 242, 245)">
            <div style="display: flex; align-items: center; width: 99%">
              <svg-icon
                class-name="icon"
                icon-class="pdf02"
                style="transform: scale(1.5); z-index: 999; margin: 20px"
              />
              <el-tooltip
                class="item"
                effect="dark"
                :content="getFileByContractAppendicesList(url)"
                placement="top-start"
              >
                <p
                  style="
                    white-space: nowrap;
                    max-width: 60%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                >
                  {{ getFileByContractAppendicesList(url) }}
                </p>
              </el-tooltip>
              <svg-icon
                class-name="icon"
                icon-class="download02"
                style="
                  transform: scale(1.2);
                  z-index: 999;
                  margin: 10px;
                  margin-left: auto;
                  cursor: pointer;
                "
                @click="download()"
              />
              <p
                style="
                  font-size: 14px;
                  cursor: pointer;
                  color: rgb(25, 149, 247);
                  margin-right: 10px;
                  margin-bottom: 15px;
                "
                v-if="formDisabled !== true"
              >
                识别当前页
              </p>
              <el-upload
                :action="fileUrl"
                :on-success="uploadFile"
                :before-upload="handleBeforeUpload"
                :show-file-list="false"
                :headers="headers"
                v-if="formDisabled !== true"
              >
                <el-button
                  type="text"
                  style="
                    color: rgb(24, 144, 255) !important;
                    background-color: transparent !important;
                  "
                  >更改</el-button
                >
              </el-upload>
            </div>
            <div
              class="imageView"
              @mouseenter="isHovered = true"
              @mouseleave="isHovered = false"
            >
              <svg-icon
                v-if="isHovered"
                class-name="icon"
                icon-class="right"
                @click="nextPage"
                class="directionRight"
              />
              <svg-icon
                v-if="isHovered"
                class-name="icon"
                icon-class="left"
                @click="prePage"
                class="directionLeft"
              />
              <div class="pdf-container">
                <pdf
                  :page="PdfpageNum"
                  :src="url"
                  @progress="loadedRatio = $event"
                  @num-pages="pageTotalNum = $event"
                  style="width: 100%; margin-left: 10px"
                ></pdf>
              </div>
            </div>
            <div style="margin: 10px; color: rgb(110, 114, 115)">
              当前页数：{{ PdfpageNum }} / {{ pageTotalNum }}
            </div>
          </div>
          <div style="width: 25%; margin: 10px; height: 680px; overflow: auto">
            <div
              style="
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                margin-left: 20px;
              "
            >
              <div class="blueBox"></div>
              <div style="font-size: large">合同信息</div>
            </div>
            <div>
              <el-form
                ref="contractFormRef"
                :model="contractForm"
                :inline="true"
                label-width="80px"
                label-position="top"
                style="margin-left: 20px"
              >
                <el-form-item
                  label="合同名称"
                  prop="name"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合同名称',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-input
                    v-model="contractForm.name"
                    clearable
                    :disabled="formDisabled"
                    :style="{ width: 'calc(25vw - 50%)' }"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="合同所属公司"
                  prop="belongingCompanyId"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合同所属公司',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-select
                    v-model="contractForm.belongingCompanyId"
                    clearable
                    placeholder="请选择"
                    :disabled="formDisabled"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    @change="
                      getlistContractCategorybyBelongingCompanyId(
                        contractForm.belongingCompanyId
                      )
                    "
                  >
                    <el-option
                      v-for="item in belongingCompanyList"
                      :key="item.belongingCompanyId"
                      :label="item.name"
                      :value="item.belongingCompanyId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="合同类型"
                  prop="type"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合同类型',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-select
                    v-model="contractForm.type"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    clearable
                    :disabled="formDisabled"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="合同类别"
                  prop="contractCategoryId"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合同类别',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-select
                    v-model="contractForm.contractCategoryId"
                    clearable
                    :style="{ width: 'calc(25vw - 50%)' }"
                    placeholder="请选择"
                    :disabled="formDisabled"
                    @change="ceshi"
                  >
                    <el-option
                      v-for="item in contractCategoriesList"
                      :key="item.contractCategoryId"
                      :label="item.name"
                      :value="item.contractCategoryId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="签约方"
                  :rules="[
                    {
                      required: true,
                      message: '请输入签约方',
                      trigger: 'change',
                    },
                  ]"
                >
                  <div
                    v-for="(item, index) in contractPartyNameList"
                    :key="index"
                    style="display: flex; align-items: center; margin-left: 5px"
                  >
                    <p style="min-width: 40px">
                      {{ contractingPartyLabelList[index] }}
                    </p>
                    <el-select
                      v-model="item.value"
                      filterable
                      allow-create
                      clearable
                      default-first-option
                      :disabled="formDisabled"
                      placeholder="请选择或是输入"
                      @change="ceshi"
                      :style="{ width: 'calc(25vw - 70%)' }"
                    >
                      <el-option
                        v-for="element in contractingPartyValueList"
                        :key="element.name"
                        :label="element.name"
                        :value="element.name"
                      >
                      </el-option>
                    </el-select>
                    <el-button
                      @click="delContractorList(index)"
                      v-if="formDisabled !== true"
                      >-</el-button
                    >
                  </div>
                  <el-button
                    icon="el-icon-plus"
                    :disabled="postContractorListDiasble"
                    @click="postContractPartyNameListt"
                    :style="{ width: 'calc(25vw - 35%)' }"
                    v-if="formDisabled !== true"
                  ></el-button>
                </el-form-item>
                <el-form-item
                  label="合同生效日期"
                  prop="effectiveTime"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合同生效日期',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-date-picker
                    v-model="contractForm.effectiveTime"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    :editable="false"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    :disabled="formDisabled"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="合同终止日期"
                  prop="terminationTime"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合同生效日期',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-date-picker
                    v-model="contractForm.terminationTime"
                    type="date"
                    placeholder="选择日期"
                    :editable="false"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    :disabled="formDisabled"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="合同签订时间"
                  prop="signingTime"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合同签订时间',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-date-picker
                    v-model="contractForm.signingTime"
                    type="date"
                    :editable="false"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    :disabled="formDisabled"
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  label="合同归属年份"
                  prop="belongingYear"
                  :rules="[
                    {
                      required: true,
                      message: '请输入合同归属年份',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-date-picker
                    v-model="contractForm.belongingYear"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    type="year"
                    placeholder="选择年份"
                    :editable="false"
                    :disabled="formDisabled"
                    format="yyyy"
                    value-format="yyyy"
                  />
                </el-form-item>
                <el-form-item label="合同金额" prop="money">
                  <el-input
                    v-model="contractForm.money"
                    clearable
                    @change="changeCollectionAndPaymentTypesByMoney"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    :disabled="formDisabled"
                    @input="handleInput"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="收（付）款类型"
                  prop="collectionAndPaymentTypes"
                  v-if="
                    contractForm.money !== '' ||
                    contractForm.money !== null ||
                    contractForm.money !== undefined
                  "
                >
                  <el-select
                    v-model="contractForm.collectionAndPaymentTypes"
                    clearable
                    :style="{ width: 'calc(25vw - 50%)' }"
                    placeholder="请选择"
                    :disabled="formDisabled"
                    @change="typeChange"
                  >
                    <el-option
                      v-for="item in PaymentType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="开票状态" prop="state">
                  <el-select
                    v-model="contractForm.state"
                    clearable
                    :disabled="formDisabled"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in stateList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="合同负责人" prop="director">
                  <el-input
                    v-model="contractForm.director"
                    clearable
                    :style="{ width: 'calc(25vw - 50%)' }"
                    :disabled="formDisabled"
                  ></el-input>
                </el-form-item>
                <el-form-item label="原件归档位置" prop="archiveLocationName">
                  <el-select
                    v-model="contractForm.archiveLocation"
                    clearable
                    placeholder="请选择"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    :disabled="formDisabled"
                  >
                    <el-option
                      v-for="item in archiveLocationNameList"
                      :key="item.archiveLocationId"
                      :label="item.archiveLocation"
                      :value="item.archiveLocationId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div
                style="
                  display: flex;
                  align-items: center;
                  margin-bottom: 10px;
                  margin-left: 20px;
                "
                v-if="formDisabled !== true"
              >
                <div class="blueBox"></div>
                <div style="font-size: large">附件信息</div>
              </div>
              <el-upload
                v-if="formDisabled !== true"
                :action="fileUrl"
                :on-success="uploadData"
                :on-remove="handleRemove"
                :file-list="contractAppendicesList"
                :before-upload="handleBeforeUpload"
                :headers="headers"
              >
                <el-button
                  icon="el-icon-plus"
                  style="margin-left: 20px"
                  :style="{ width: 'calc(23vw - 100%)' }"
                />
              </el-upload>
              <div
                style="
                  display: flex;
                  align-items: center;
                  margin-top: 20px;
                  margin-left: 20px;
                "
              >
                <div class="blueBox"></div>
                <div style="font-size: large">其他信息</div>
              </div>
              <p style="margin-left: 20px">备注(200字内)</p>
              <el-input
                type="textarea"
                :disabled="formDisabled"
                :autosize="{ minRows: 6, maxRows: 8 }"
                placeholder="请输入内容"
                v-model="contractForm.remark"
                maxlength="200"
                style="margin-left: 20px"
                :style="{ width: 'calc(30vw - 55%)' }"
                :class="{
                  'input-limit-reached':
                    contractForm.remark && contractForm.remark.length >= 200,
                }"
                show-word-limit
              />
            </div>
          </div>
        </div>
        <div v-show="aciton == 1">
          <div
            style="display: flex; flex-direction: column"
            v-if="image404 === true"
          >
            <img
              src="../../../assets/images/404.png"
              style="height: 150px; width: 300px; margin: auto"
            />
            <div style="display: flex; margin: auto">
              <p>需先填写收(付)款类型、合同总额</p>
              <p
                style="color: rgb(77, 173, 249); cursor: pointer"
                @click="goToFirst()"
                v-if="formDisabled !== true"
              >
                前往填写
              </p>
            </div>
          </div>
          <div v-if="image404 === false">
            <div style="display: flex; align-items: center">
              <p style="margin: 0 20px 20px 0">
                收(付)款类型：
                <el-tag
                  style="font-size: 14px; border-radius: 10px"
                  v-if="contractForm.collectionAndPaymentTypes"
                  :type="
                    contractForm.collectionAndPaymentTypes == '收款'
                      ? 'success'
                      : 'warning'
                  "
                  >{{ contractForm.collectionAndPaymentTypes }}</el-tag
                >
                <el-tag v-else type="info" style="font-size: 14px"
                  >暂未选择</el-tag
                >
              </p>
              <p style="margin: 0 20px 20px 20px">
                合同总额(元)：{{ contractForm.allMoney }}
              </p>
              <p style="margin: 0 20px 20px 20px">
                原合同金额(元)：{{ contractForm.money }}
              </p>
              <p style="margin: 0 20px 20px 20px">
                附件金额(元)：{{ contractForm.allAppendicesMoney }}
              </p>
              <p style="margin: 0 20px 20px 20px">
                未收(付)金额(元)：
                {{ AmountnotyetReceivedPaid }}
              </p>
              <p style="margin: 0 20px 20px 20px">
                收付款状态：
                <el-tag
                  style="font-size: 14px; border-radius: 10px"
                  :type="collectionAndPaymentStateType"
                  >{{ contractForm.collectionAndPaymentState }}</el-tag
                >
              </p>
            </div>
            <el-table
              :data="paymentCollectionPlanList"
              style="width: 100%; border: 1px solid #ccc; border-radius: 5px"
              :fit="true"
              stripe
              header-align="center"
              max-height="300"
              :header-cell-style="{
                background: 'rgb(224, 241, 255)',
                color: '#606266',
              }"
            >
              <el-table-column
                type="index"
                label="序号"
                align="center"
                width="80"
              />
              <el-table-column label="发票金额(元)" align="center" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.invoiceAmount"
                    :disabled="formDisabled"
                    @input="handleInputBasicByInvoiceAmount($event, scope.row)"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" width="150">
                <template #header>
                  <i style="color: #f56c6c">*</i>
                  应收(付)金额(元)
                </template>
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.payableAmount"
                    @input="handleInputBasicByPayableAmount($event, scope.row)"
                    :disabled="formDisabled"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="应收(付)日期" align="center" width="180">
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="scope.row.payableTime"
                    type="date"
                    clearable
                    :disabled="formDisabled"
                    placeholder="选择日期"
                    :editable="false"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column
                label="实收(付)金额(元)"
                align="center"
                width="150"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.actualPayableAmount"
                    @input="
                      handleInputBasicByActualPayableAmount($event, scope.row)
                    "
                    :disabled="formDisabled"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="实收(付)日期" align="center" width="180">
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="scope.row.actualPayableTime"
                    type="date"
                    clearable
                    :disabled="formDisabled"
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column align="center" width="150">
                <template #header>
                  <i style="color: #f56c6c">*</i>
                  收付款状态
                </template>
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.state"
                    placeholder="请选择"
                    :disabled="formDisabled"
                  >
                    <el-option
                      v-for="item in receiptPaymenList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="所属合同" align="center" width="150">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.contractAppendicesName"
                    clearable
                    :disabled="formDisabled"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in contractAppendicesNameList"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="发票说明" align="center" width="350">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.remark"
                    :disabled="formDisabled"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="150">
                <template #default="scope">
                  <svg-icon
                    class-name="icon"
                    icon-class="stop"
                    style="height: 24px; width: 24px; cursor: pointer"
                    v-if="scope.$index !== 0 && formDisabled !== true"
                    @click="DeleteByIndex(scope.$index)"
                  />
                </template>
              </el-table-column>
            </el-table>
            <div
              style="
                display: flex;
                margin-left: 20px;
                width: 100%;
                align-items: center;
                margin-bottom: 45px;
              "
              v-if="formDisabled !== true"
            >
              <svg-icon
                class-name="icon"
                icon-class="add"
                style="height: 24px; width: 24px; cursor: pointer"
                @click="periodsNumber()"
              />
              <p
                style="
                  margin-left: 10px;
                  font-size: 15px;
                  color: rgb(25, 149, 247);
                  cursor: pointer;
                "
                @click="periodsNumber()"
              >
                增加期数
              </p>
            </div>
            <div style="display: flex; align-items: center">
              <div class="blueBox"></div>
              <div style="font-size: large">发票附件</div>
            </div>
            <div
              style="
                display: flex;
                align-items: center;
                overflow: auto;
                width: 80%;
              "
            >
              <div v-for="(item, index) in selectInvoiceVo" :key="index">
                <div class="bill">
                  <svg-icon
                    class-name="icon"
                    icon-class="bill"
                    style="width: 20px; height: 20px; margin-right: 5px"
                  />{{ item.code }}
                  <div class="Mask">
                    <svg-icon
                      class-name="icon"
                      icon-class="see02"
                      style="
                        width: 20px;
                        height: 20px;
                        margin-right: 5px;
                        cursor: pointer;
                      "
                      @click="Preview(item.pdfAddress)"
                    />
                    <svg-icon
                      class-name="icon"
                      icon-class="copy02"
                      style="
                        width: 20px;
                        height: 20px;
                        margin-right: 5px;
                        cursor: pointer;
                      "
                      @click="copyToClipboard(item.code)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          v-for="(item, index) in contractAppendicesList"
          v-show="aciton == index + 2"
          style="display: flex"
        >
          <div style="width: 50%; background-color: rgb(240, 242, 245)">
            <div style="display: flex; align-items: center; width: 99%">
              <svg-icon
                class-name="icon"
                icon-class="pdf02"
                style="transform: scale(1.5); z-index: 999; margin: 20px"
              />
              <el-tooltip
                class="item"
                effect="dark"
                :content="nameList[index]"
                placement="top-start"
              >
                <p
                  style="
                    white-space: nowrap;
                    max-width: 200px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                >
                  {{ nameList[index] }}
                </p>
              </el-tooltip>
              <svg-icon
                class-name="icon"
                icon-class="download02"
                style="
                  transform: scale(1.2);
                  z-index: 999;
                  margin-right: 10px;
                  margin-left: auto;
                  cursor: pointer;
                "
                @click="downloadAppendix(urlList[index])"
              />
              <p
                style="
                  font-size: 14px;
                  cursor: pointer;
                  color: rgb(25, 149, 247);
                  margin-right: 10px;
                  margin-bottom: 15px;
                "
                v-if="formDisabled !== true"
              >
                识别当前页
              </p>
              <el-upload
                :action="fileUrl"
                :on-success="
                  (response, file, fileList) =>
                    uploadFileByPdfAddress(response, file, fileList, index)
                "
                v-if="formDisabled !== true"
                :before-upload="handleBeforeUpload"
                :show-file-list="false"
                :headers="headers"
              >
                <el-button
                  type="text"
                  style="
                    color: rgb(24, 144, 255) !important;
                    background-color: transparent !important;
                  "
                  >更改</el-button
                >
              </el-upload>
            </div>
            <div
              class="imageView"
              @mouseenter="isHovered = true"
              @mouseleave="isHovered = false"
            >
              <svg-icon
                v-if="isHovered"
                class-name="icon"
                icon-class="right"
                @click="nextPageInList(index)"
                class="directionRight"
              />
              <svg-icon
                v-if="isHovered"
                class-name="icon"
                icon-class="left"
                @click="prePageInList(index)"
                class="directionLeft"
              />
              <div class="pdf-container">
                <pdf
                  v-if="pdfView"
                  :page="pdfStatusPage[index]"
                  :src="urlList[index]"
                  @progress="loadedRatioList[index] = $event"
                  @num-pages="getpageTotalNum($event, index)"
                  style="width: 100%; margin-left: 10px"
                ></pdf>
              </div>
            </div>
            <div style="margin: 10px; color: rgb(110, 114, 115)">
              当前页数：{{ pdfStatusPage[index] }} / {{ pdfStatus[index] }}
            </div>
          </div>
          <div style="width: 25%; margin: 10px; height: 680px; overflow: auto">
            <div
              style="
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                margin-left: 20px;
              "
            >
              <div class="blueBox"></div>
              <div style="font-size: large">附件信息</div>
            </div>
            <div>
              <el-form
                ref="contractAppendicesListRef"
                :model="contractAppendicesList[index]"
                :inline="true"
                label-width="80px"
                label-position="top"
                style="margin-left: 20px"
              >
                <el-form-item
                  label="附件名称"
                  prop="name"
                  :rules="[
                    {
                      required: true,
                      message: '请输入附件名称',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-input
                    v-model="contractAppendicesList[index].name"
                    :disabled="formDisabled"
                    clearable
                    :style="{ width: 'calc(25vw - 50%)' }"
                  ></el-input>
                </el-form-item>
                <el-form-item label="附件金额（元）" prop="money">
                  <el-input
                    v-model="contractAppendicesList[index].money"
                    :disabled="formDisabled"
                    clearable
                    @input="handleInputByIndex($event, index)"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    @change="calculateAttachmentAmount"
                  ></el-input>
                </el-form-item>
                <el-form-item label="附件生效日期" prop="effectiveTime">
                  <el-date-picker
                    v-model="contractAppendicesList[index].effectiveTime"
                    type="date"
                    clearable
                    placeholder="选择日期"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    :editable="false"
                    :disabled="formDisabled"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="附件终止日期" prop="terminationTime">
                  <el-date-picker
                    v-model="contractAppendicesList[index].terminationTime"
                    type="date"
                    :disabled="formDisabled"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    placeholder="选择日期"
                    :editable="false"
                    clearable
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="附件签订日期" prop="signingTime">
                  <el-date-picker
                    v-model="contractAppendicesList[index].signingTime"
                    type="date"
                    placeholder="选择日期"
                    :editable="false"
                    :style="{ width: 'calc(25vw - 50%)' }"
                    :disabled="formDisabled"
                    clearable
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="附件负责人" prop="director">
                  <el-input
                    v-model="contractAppendicesList[index].director"
                    clearable
                    :disabled="formDisabled"
                    :style="{ width: 'calc(25vw - 50%)' }"
                  ></el-input>
                </el-form-item>
                <el-form-item label="原件归档位置" prop="archiveLocationId">
                  <el-select
                    v-model="contractAppendicesList[index].archiveLocationId"
                    clearable
                    :disabled="formDisabled"
                    placeholder="请选择"
                    :style="{ width: 'calc(25vw - 50%)' }"
                  >
                    <el-option
                      v-for="item in archiveLocationNameList"
                      :key="item.archiveLocationId"
                      :label="item.archiveLocation"
                      :value="item.archiveLocationId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                  "
                >
                  <div class="blueBox"></div>
                  <div style="font-size: large">其他信息</div>
                </div>
                备注(200字内)
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 6, maxRows: 8 }"
                  placeholder="请输入内容"
                  :disabled="formDisabled"
                  v-model="contractAppendicesList[index].remark"
                  maxlength="200"
                  show-word-limit
                  :style="{ width: 'calc(30vw - 55%)' }"
                  :class="{
                    'input-limit-reached':
                      contractAppendicesList[index].remark &&
                      contractAppendicesList[index].remark.length >= 200,
                  }"
                />
              </el-form>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="submitContractForm"
          v-if="formDisabled !== true"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listContract,
  getContract,
  delContract,
  addContract,
  updateContract,
} from "@/api/contract/Contract";
import { listBelongingCompany } from "@/api/contract/BelongingCompany";
import { listContractCategorybyBelongingCompanyId } from "@/api/contract/ContractCategory";
import { listContractParty } from "@/api/contract/ContractParty";
import { listArchiveLocation } from "@/api/contract/ArchiveLocation";
import { getToken } from "@/utils/auth";
import pdf from "vue-pdf";
import { downLoadExcle } from "@/utils/zipDownload.js";
export default {
  name: "Contract",
  components: {
    pdf,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      activeName: 0,
      aciton: 0,
      dialogList: [],
      pdfStatus: [],
      pdfStatusPage: [],
      // 合同表格数据
      ContractList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        code: null,
        belongingCompanyId: null,
        contractCategoryId: null,
        effectiveTime: null,
        terminationTime: null,
        signingTime: null,
        belongingYear: null,
        money: null,
        collectionAndPaymentTypes: null,
        state: null,
        director: null,
        archiveLocation: null,
        addUserId: null,
        addTime: null,
        updateUserId: null,
        pdfAddress: null,
        value: null,
      },
      // 表单参数
      form: {},
      fileUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      document: "",
      url: "",
      PdfpageNum: 1,
      pageTotalNum: 1,
      PictureInformation: [],
      loadedRatio: 0,
      loadedRatioList: [],
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      formDisabled: true,
      selectInvoiceVo: [],
      isHovered: false,
      //合同列表
      belongingCompanyList: [],
      //合同类型
      options: [
        {
          label: "销项合同",
          value: "销项合同",
        },
        {
          label: "进项合同",
          value: "进项合同",
        },
        {
          label: "其他",
          value: "其他",
        },
      ],
      //收付款类型
      PaymentType: [
        { label: "收款", value: "收款" },
        { label: "付款", value: "付款" },
      ],
      //签约方label列表
      contractingPartyLabelList: [
        "甲方",
        "乙方",
        "丙方",
        "丁方",
        "戊方",
        "己方",
        "庚方",
      ],
      //未（收）付金额
      AmountnotyetReceivedPaid: "",
      //合同类别列表：
      contractCategoriesList: [],
      //签约方选择列表
      contractingPartyValueList: [],
      //原件归档位置
      archiveLocationNameList: [],
      //开票状态列表
      stateList: [
        {
          label: "未开票",
          value: "未开票",
        },
        {
          label: "已开票",
          value: "已开票",
        },
        {
          label: "部分开票",
          value: "部分开票",
        },
      ],
      //收付款状态列表
      receiptPaymenList: [],
      //长效时间选项
      pickerOptions: {
        shortcuts: [
          {
            text: "长效",
            onClick(picker) {
              picker.$emit("pick", new Date(9999, 11, 31));
            },
          },
        ],
      },
      //是否显示404图片
      image404: false,
      pdfView: true,
      urlList: [],
      nameList: [],
      contractPartyNameList: [],
      collectionAndPaymentStateType: "",
      //弹窗1参数
      postContractorListDiasble: false,
      //签约方form
      contractorForm: {},
      contractorList: [],
      AmountNot: "",
      PaymentTypeType: "",
      PaymentStateType: "",
      pdfAddress: "",
      contractForm: {
        contractCategoryName: null,
        belongingCompanyId: null,
        type: null,
        contractCategoryId: null,
        effectiveTime: null,
        terminationTime: null,
        signingTime: null,
        belongingYear: null,
        money: null,
        collectionAndPaymentTypes: null,
        state: null,
        remark: null,
        archiveLocation: null,
        director: null,
      },
      paymentCollectionPlanList: [],
      collectionAndPaymentStateLiast: [
        {
          label: "已收款",
          value: "已收款",
        },
        {
          label: "未收款",
          value: "未收款",
        },
        {
          label: "已付款",
          value: "已付款",
        },
        {
          label: "未付款",
          value: "未付款",
        },
        {
          label: "部分已付",
          value: "部分已付",
        },
        {
          label: "部分已收",
          value: "部分已收",
        },
      ],
      contractAppendicesNameList: [{ name: "原合同" }],
      AttachmentList: [],
      contractAppendicesList: [],
      contractAppendicesForm: {},
      buttonList: [
        {
          icon: "el-icon-delete",
          text: "批量删除",
          methods: this.handleDelete,
        },
        {
          icon: "el-icon-upload2",
          text: "导出台账",
          methods: this.getContractZipByList,
        },
        {
          icon: "el-icon-download",
          text: "批量下载",
          methods: this.getContractImageByList,
        },
      ],
      tableItem: [
        {
          porp: "合同名称",
          data: "contract.name",
          fixed: "left",
          width: 160,
          solt: {
            name: 2,
          },
          methods: this.handleView,
        },
        {
          porp: "合同编码",
          data: "contract.code",
          width: 170,
        },
        {
          porp: "合同类型",
          data: "contract.type",
          width: 120,
        },
        {
          porp: "合同所属公司",
          data: "contract.belongingCompanyName",
          width: 120,
        },
        {
          porp: "合同类别",
          data: "contract.contractCategoryName",
          width: 120,
        },
        {
          porp: "签约方",
          data: "contractPartyNameList",
          width: 160,
          solt: {
            name: 4,
            property: "contractPartyNameList",
          },
        },
        {
          porp: "合同总额(元)",
          data: "contract.allMoney",
          width: 170,
        },
        {
          porp: "收(付)款类型",
          data: "contract.collectionAndPaymentTypes",
          solt: {
            name: 3,
            state: [
              {
                type: "success",
                text: "收款",
              },
              {
                type: "danger",
                text: "付款",
              },
            ],
          },
          width: 170,
        },
        {
          porp: "收（付）款状态",
          data: "contract.collectionAndPaymentState",
          width: 170,
          solt: {
            name: 3,
            state: [
              {
                type: "danger",
                text: "未收款",
              },
              {
                type: "danger",
                text: "未付款",
              },
              {
                type: "",
                text: "部分收款",
              },
              {
                type: "",
                text: "部分付款",
              },
              {
                type: "success",
                text: "已收款",
              },
              {
                type: "success",
                text: "已付款",
              },
            ],
          },
        },
        {
          porp: "开票状态",
          data: "contract.state",
          width: 170,
        },
        {
          porp: "合同归属年份",
          data: "contract.belongingYear",
          width: 170,
        },
        {
          porp: "签订日期",
          data: "contract.signingTime",
          width: 170,
        },
        {
          porp: "合同生效日期",
          data: "contract.effectiveTime",
          width: 170,
        },
        {
          porp: "合同终止日期",
          data: "contract.terminationTime",
          width: 170,
        },
        {
          porp: "合同负责人",
          data: "contract.director",
          width: 170,
        },
        {
          porp: "发票金额（元）",
          data: "contract.allInvoiceMoney",
          width: 170,
        },
        {
          porp: "原件归档位置",
          data: "contract.archiveLocationName",
          width: 170,
        },
        {
          porp: "上传者",
          data: "contract.addUserName",
          width: 170,
        },
        {
          porp: "上传时间",
          data: "contract.addTime",
          width: 170,
        },
        {
          porp: "修改者",
          data: "contract.updateUserName",
          width: 170,
        },
        {
          porp: "修改时间",
          data: "contract.updateTime",
          width: 170,
        },
        {
          porp: "操作",
          fixed: "right",
          width: 120,
          solt: {
            name: 5,
            operate: [
              {
                text: "修改",
                icon: "editTable",
                methods: this.handleUpdate,
              },
              {
                text: "删除",
                icon: "del",
                methods: this.handleDelete,
              },
            ],
          },
        },
      ],
    };
  },
  created() {
    this.getList();
    this.getBelongingCompany();
  },
  watch: {
    aciton() {
      this.typeChange();
    },
  },
  methods: {
    //表格限制发票金额
    handleInputBasicByInvoiceAmount(value, scope) {
      const regex = /^\d{0,6}(\.\d{0,2})?$/;
      // 如果输入不符合正则表达式，则将值重置为上一次的合法值
      if (!regex.test(value)) {
        scope.invoiceAmount = scope.invoiceAmount.substring(
          0,
          value.length - 1
        );
      }
    },
    //表格限制实付金额
    handleInputBasicByActualPayableAmount(value, scope) {
      const regex = /^\d{0,6}(\.\d{0,2})?$/;
      // 如果输入不符合正则表达式，则将值重置为上一次的合法值
      if (!regex.test(value)) {
        scope.actualPayableAmount = scope.actualPayableAmount.substring(
          0,
          value.length - 1
        );
      }
    },
    //表格限制应付金额
    handleInputBasicByPayableAmount(value, scope) {
      const regex = /^\d{0,6}(\.\d{0,2})?$/;
      // 如果输入不符合正则表达式，则将值重置为上一次的合法值
      if (!regex.test(value)) {
        scope.payableAmount = scope.payableAmount.substring(
          0,
          value.length - 1
        );
      }
    },
    //限制输入
    handleInput(value) {
      const regex = /^\d{0,6}(\.\d{0,2})?$/;
      // 如果输入不符合正则表达式，则将值重置为上一次的合法值
      if (!regex.test(value)) {
        this.contractForm.money = this.contractForm.money.substring(
          0,
          value.length - 1
        );
      }
    },
    //附件金额限制
    handleInputByIndex(value, index) {
      const regex = /^\d{0,6}(\.\d{0,2})?$/;
      // 如果输入不符合正则表达式，则将值重置为上一次的合法值
      if (!regex.test(value)) {
        this.contractAppendicesList[index].money = this.contractAppendicesList[
          index
        ].money.substring(0, value.length - 1);
      }
    },
    //批量导出合同台账
    getContractZipByList() {
      downLoadExcle("/contract/Contract/export", this.ids)
        .then((res) => {
          return res.data;
        })
        .then((file) => {
          const fileUrl = URL.createObjectURL(file);
          const a = document.createElement("a");
          a.href = fileUrl;
          a.download = "合同台账信息.xlsx";
          document.body.appendChild(a); // 将链接添加到文档中
          a.click(); // 触发下载
          document.body.removeChild(a); // 下载完成后移除链接
          URL.revokeObjectURL(url);
        });
    },
    //批量下载合同图片
    getContractImageByList() {
      downLoadExcle("/contract/Contract/download", this.ids)
        .then((res) => {
          return res.data;
        })
        .then((file) => {
          const fileUrl = URL.createObjectURL(file);
          const a = document.createElement("a");
          a.href = fileUrl;
          a.download = "合同.zip";
          document.body.appendChild(a); // 将链接添加到文档中
          a.click(); // 触发下载
          document.body.removeChild(a); // 下载完成后移除链接
          URL.revokeObjectURL(url);
        });
    },
    //金额为0时把收（付）款类型处理了
    changeCollectionAndPaymentTypesByMoney() {
      if (this.contractForm.contractId == null) {
        // ("新增模式");
        if (this.contractForm.money == "" || this.contractForm.money == null) {
          this.contractForm.collectionAndPaymentTypes = "";
        }
        this.typeChange();
        this.calculateAttachmentAmount();
      } else {
        this.calculateAttachmentAmount();
      }
    },
    //计算附件金额
    calculateAttachmentAmount() {
      this.contractForm.allAppendicesMoney = this.contractAppendicesList.reduce(
        (sum, item) =>
          sum + (isNaN(Number(item.money)) ? 0 : Number(item.money)),
        0
      );
      this.contractForm.allAppendicesMoney;
      this.contractForm.money;
      Number(this.contractForm.allAppendicesMoney || 0);
      Number(this.contractForm.money || 0);
      this.contractForm.allMoney =
        Number(this.contractForm.allAppendicesMoney || 0) +
        Number(this.contractForm.money || 0);
      this.AmountnotyetReceivedPaid =
        Number(this.contractForm.allMoney || 0) -
        Number(this.contractForm.paidPayment || 0);
    },
    //收付款类型选择判断
    typeChange() {
      // "收付款类型", this.contractForm.collectionAndPaymentTypes;
      if (!this.contractForm.contractId) {
        if (this.contractForm.collectionAndPaymentTypes == "收款") {
          this.contractForm.collectionAndPaymentState = "未收款";
        } else if (this.contractForm.collectionAndPaymentTypes == "付款") {
          this.contractForm.collectionAndPaymentState = "未付款";
        }
      }

      if (this.contractForm.collectionAndPaymentTypes == "收款") {
        switch (this.contractForm.collectionAndPaymentState) {
          case "未付款":
            this.contractForm.collectionAndPaymentState = "未收款";
            break;
          case "已付款":
            this.contractForm.collectionAndPaymentState = "已收款";
            break;
          case "部分付款":
            this.contractForm.collectionAndPaymentState = "部分收款";
            break;
          default:
            break;
        }
      } else if (this.contractForm.collectionAndPaymentTypes == "付款") {
        switch (this.contractForm.collectionAndPaymentState) {
          case "未收款":
            this.contractForm.collectionAndPaymentState = "未付款";
            break;
          case "已收款":
            this.contractForm.collectionAndPaymentState = "已付款";
            break;
          case "部分收款":
            this.contractForm.collectionAndPaymentState = "部分付款";
            break;
          default:
            break;
        }
      }

      if (
        this.contractForm.collectionAndPaymentState === "已收款" ||
        this.contractForm.collectionAndPaymentState === "已付款"
      ) {
        this.collectionAndPaymentStateType = "success";
      } else if (
        this.contractForm.collectionAndPaymentState === "部分收款" ||
        this.contractForm.collectionAndPaymentState === "部分付款"
      ) {
        this.collectionAndPaymentStateType = "primary";
      } else if (
        this.contractForm.collectionAndPaymentState === "未收款" ||
        this.contractForm.collectionAndPaymentState === "未付款"
      ) {
        this.collectionAndPaymentStateType = "warning";
      }

      if (
        !this.contractForm.contractId &&
        ((this.contractForm.money == undefined &&
          !this.contractAppendicesList.some((item) => item.money)) ||
          this.contractForm.collectionAndPaymentTypes == undefined)
      ) {
        //   "this.contractForm的新增初始化模式", this.contractForm;
        //   "this.contractForm的新增初始化模式", this.contractForm.money;
        this.image404 = true;
      } else if (
        !this.contractForm.contractId &&
        (this.contractForm.money !== "" ||
          this.contractAppendicesList.some((item) => item.money) ||
          this.contractForm.collectionAndPaymentTypes !== "")
      ) {
        // "this.contractForm的显示模式", this.contractForm;
        // "this.contractForm的显示模式", this.contractForm.money;
        // "this.contractForm的显示模式",
        //   this.contractForm.collectionAndPaymentTypes;
        this.image404 = false;
        this.collectionAndPaymentTypesChange();
      } else if (
        !this.contractForm.contractId &&
        (((this.contractForm.money == "" || this.contractForm.money == null) &&
          (this.contractAppendicesList.some((item) => item.money == "") ||
            this.contractAppendicesList.some((item) => item.money == null))) ||
          this.contractForm.collectionAndPaymentTypes == "" ||
          this.contractForm.collectionAndPaymentTypes == null)
      ) {
        // "this.contractForm的新增初始化模式", this.contractForm;
        // ("11111");
        this.image404 = true;
      }

      this.collectionAndPaymentTypesChange();
    },
    //pdf附件删除回调
    handleRemove(res, flieList) {
      this.pdfView = false;
      this.contractAppendicesNameList = [
        {
          name: "原文件",
        },
      ];
      // "删除pdf", res;
      // "剩余fileList", flieList;
      this.contractAppendicesList = flieList;
      this.nameList = [];
      this.pdfStatusPage = [];
      this.loadedRatioList = [];
      this.urlList = [];
      this.contractAppendicesList.forEach((item) => {
        this.nameList.push(item.name);
        this.urlList.push(process.env.VUE_APP_BASE_API + item.pdfAddress);
        this.pdfStatusPage.push(1);
        this.loadedRatioList.push(0);
      });
      this.contractAppendicesList.forEach((item, index) => {
        this.contractAppendicesNameList.push({
          name: "附件-" + (index + 1),
        });
      });
      // "删除回调urlList", this.urlList;
      this.$nextTick(() => {
        this.pdfView = true;
      });
    },
    //pdf附件展示上传回调
    uploadFile(file) {
      // "展示附件上传回调", file;
      this.url = process.env.VUE_APP_BASE_API + file.fileName;
      const file02 = file.url.split("/");
      this.document = file02[file02.length - 1];
      this.contractForm.pdfAddress = file.fileName;
    },
    //文件导入按钮事件
    uploadFileHandleAdd(file) {
      this.reset();
      "展示附件上传回调", file;
      this.url = process.env.VUE_APP_BASE_API + file.fileName;
      const file02 = file.url.split("/");
      this.document = file02[file02.length - 1];
      this.contractForm.pdfAddress = file.fileName;
      this.handleAdd();
    },
    //附件pdf上传成功回调
    uploadFileByPdfAddress(res, file, fileList, index) {
      this.pdfView = false;
      // "返回", res;
      // "文件", file;
      // "列表", fileList;
      // "位置", index;
      this.urlList[index] = process.env.VUE_APP_BASE_API + res.fileName;
      this.pdfStatusPage[index] = 1;
      this.urlList;
      this.nameList[index] = this.getFileByContractAppendicesList(
        this.urlList[index]
      );
      this.contractAppendicesList[index].pdfAddress = res.fileName;
      this.$nextTick(() => {
        this.pdfView = true;
      });
    },
    //获取页码
    getpageTotalNum(value, index) {
      // "页面页码", value;
      // "位置", index;
      this.pdfStatus[index] = value;
    },
    //附件获取图片名称
    getFileByContractAppendicesList(pdfAddress) {
      // "pdfAddress", pdfAddress;
      const url = process.env.VUE_APP_BASE_API + pdfAddress;
      // url;
      if (pdfAddress !== "") {
        const file02 = url.split("/");
        "file02", file02;
        return file02[file02.length - 1];
      }
      return "空";
    },
    //获取附件的url
    getUrl(value) {
      if (value !== "") {
        const url = process.env.VUE_APP_BASE_API + value;
        return url;
      }
      return "";
    },
    //pdf下载按钮
    download() {
      // this.url;
      window.open(this.url, "_blank");
    },
    //附件pdf下载按钮
    downloadAppendix(value) {
      // value;
      window.open(value, "_blank");
    },
    //上一页
    prePage() {
      if (this.PdfpageNum > 1) {
        this.PdfpageNum--;
      } else {
        this.$message({
          message: "已到达第一页",
          type: "warning",
        });
      }
    },
    //下一页
    nextPage() {
      if (this.PdfpageNum < this.pageTotalNum) {
        this.PdfpageNum++;
      } else {
        this.$message({
          message: "已到达最后一页",
          type: "warning",
        });
      }
    },
    //附件中上一页
    prePageInList(index) {
      if (this.pdfStatusPage[index] > 1) {
        this.pdfStatusPage[index]--;
      } else {
        this.$message({
          message: "已到达第一页",
          type: "warning",
        });
      }
    },
    //附件中下一页
    nextPageInList(index) {
      if (this.pdfStatusPage[index] < this.pdfStatus[index]) {
        this.pdfStatusPage[index]++;
      } else {
        this.$message({
          message: "已到达最后一页",
          type: "warning",
        });
      }
    },
    //增加期数
    periodsNumber() {
      this.paymentCollectionPlanList;
      let tableForm = {
        state: this.contractForm.collectionAndPaymentState,
        payableAmount: 0,
      };
      this.paymentCollectionPlanList.push(tableForm);
      this.paymentCollectionPlanList;
    },
    //删除列表项
    DeleteByIndex(res) {
      this.paymentCollectionPlanList.splice(res, 1);
    },
    //预览方法
    Preview(value) {
      let url = process.env.VUE_APP_BASE_API + value;
      // url;
      window.open(url, "_blank");
    },
    //复制方法
    async copyToClipboard(str) {
      const text = str.trim(); // 去除多余空白
      try {
        await navigator.clipboard.writeText(text);
        this.$modal.msgSuccess("复制成功");
        return;
      } catch (error) {
        console.error(error);
      }
      const el = document.createElement("textarea");
      ("11111");
      el.value = text;
      el.setAttribute("readonly", "");
      el.style.position = "absolute";
      el.style.left = "-9999px";
      document.body.appendChild(el);
      const selected =
        document.getSelection().rangeCount > 0
          ? document.getSelection().getRangeAt(0)
          : false;
      el.select();
      document.execCommand("copy");
      document.body.removeChild(el);
      if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
      }
      this.$modal.msgSuccess("复制成功");
    },
    /** 查询合同列表 */
    getList() {
      this.loading = true;
      listContract(this.queryParams).then((response) => {
        // response;
        this.ContractList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //获取公司列表
    getBelongingCompany() {
      listBelongingCompany().then((res) => {
        // res;
        this.belongingCompanyList = res.rows;
      });
    },
    //合同附件上传回调
    uploadData(file) {
      this.contractAppendicesNameList = [
        {
          name: "原文件",
        },
      ];
      // file;
      const fileValue = {
        pdfAddress: file.fileName,
        name: file.newFileName,
      };
      const url = process.env.VUE_APP_BASE_API + file.fileName;
      const name = this.getFileByContractAppendicesList(file.url);
      this.urlList.push(url);
      this.nameList.push(name);
      this.pdfStatusPage.push(1);
      this.contractAppendicesList.push(fileValue);
      "文件列表", this.contractAppendicesList;
      this.loadedRatioList.push(0);
      this.contractAppendicesList.forEach((item, index) => {
        this.contractAppendicesNameList.push({
          name: "附件-" + index + 1,
        });
      });
    },
    //获取合同类别列表
    getlistContractCategorybyBelongingCompanyId(row) {
      this.contractForm.contractCategoryId = null;
      // "获取合同类别列表参数", row;
      if (typeof row === "number") {
        // ("number");
        listContractCategorybyBelongingCompanyId(row).then((res) => {
          // res;
          this.contractCategoriesList = res.data;
        });
      } else {
        // ("nonumber");
        this.contractCategoriesList = [];
      }
    },
    //获取签约方列表
    getlistContractParty() {
      listContractParty({ pageNum: 1, pageSize: 999 }).then((res) => {
        // "签约方列表", res;
        this.contractingPartyValueList = res.rows;
      });
    },
    //获取收付款状态选择框
    collectionAndPaymentTypesChange() {
      // ("213123123");
      if (this.contractForm.collectionAndPaymentTypes == "收款") {
        this.paymentCollectionPlanList.forEach((item) => {
          switch (item.state) {
            case "未付款":
              item.state = "未收款";
              break;
            case "已付款":
              item.state = "已收款";
              break;
            case "部分付款":
              item.state = "部分收款";
              break;
            default:
              break;
          }
        });
        this.receiptPaymenList = [
          {
            label: "已收款",
            value: "已收款",
          },
          {
            label: "未收款",
            value: "未收款",
          },
          {
            label: "部分收款",
            value: "部分收款",
          },
        ];
      } else {
        this.paymentCollectionPlanList.forEach((item) => {
          switch (item.state) {
            case "未收款":
              item.state = "未付款";
              break;
            case "已收款":
              item.state = "已付款";
              break;
            case "部分收款":
              item.state = "部分付款";
              break;
            default:
              break;
          }
        });
        this.receiptPaymenList = [
          {
            label: "已付款",
            value: "已付款",
          },
          {
            label: "未付款",
            value: "未付款",
          },
          {
            label: "部分付款",
            value: "部分付款",
          },
        ];
      }
    },
    //获取原件归档位置list
    getListArchiveLocation() {
      listArchiveLocation({ pageNum: 1, pageSize: 999 }).then((res) => {
        // res;
        this.archiveLocationNameList = res.rows;
      });
    },
    //文件类型限制
    handleBeforeUpload(file) {
      const fileName = file.name.split(".");
      const fileExt = fileName[fileName.length - 1];
      const isTypeOk = fileExt == "pdf";
      if (!isTypeOk) {
        this.$modal.msgError(`文件格式不正确, 请上传pdf格式文件!`);
        return false;
      }
    },
    //跳转到第一页
    goToFirstByActiveName() {
      this.activeName = 0;
      // this.activeName;
    },
    //去往首页
    goToFirst() {
      this.aciton = 0;
    },
    //签约方新增
    postContractPartyNameListt() {
      // "签约方list", this.contractPartyNameList;
      let value = {
        value: "",
      };
      if (this.contractPartyNameList.length == 7) {
        // ("禁用");
        this.postContractorListDiasble = true;
      } else {
        this.contractPartyNameList.push(value);
      }
    },
    //签约方删除
    delContractorList(row) {
      if (
        row > -1 &&
        row < this.contractPartyNameList.length &&
        this.contractPartyNameList.length > 1
      ) {
        this.contractPartyNameList.splice(row, 1);
      } else {
        this.contractPartyNameList[0].value = "";
      }
    },
    ceshi() {
      "测试", this.contractForm.contractCategoryId;
    },
    //文件上传成功回调
    ceshi02(file) {},
    //获取附件列表方法
    ceshi03(file) {},
    // 取消按钮
    cancel() {
      this.open = false;
    },
    // 表单重置
    reset() {
      this.contractForm = {
        contractCategoryName: null,
        belongingCompanyId: null,
        type: null,
        contractCategoryId: null,
        effectiveTime: null,
        terminationTime: null,
        signingTime: null,
        belongingYear: null,
        money: null,
        collectionAndPaymentTypes: null,
        state: null,
        remark: null,
        archiveLocation: null,
        director: null,
      };
      this.nameList = [];
      this.urlList = [];
      this.aciton = 0;
      this.contractPartyNameList = [];
      this.contractAppendicesList = [];
      this.selectInvoiceVo = [];
      this.paymentCollectionPlanList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.effectiveTime = null;
      this.queryParams.terminationTime = null;
      if (this.queryParams.value) {
        this.queryParams.effectiveTime = this.queryParams.value[0];
        this.queryParams.terminationTime = this.queryParams.value[1];
      }
      // "搜索值", this.queryParams;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.value = null;
      this.queryParams.effectiveTime = null;
      this.queryParams.terminationTime = null;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.contract.contractId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
      // "选择的id列表", this.ids;
    },
    BatchDownload() {
      this.download(
        "contract/Contract/export",
        {
          ...this.ids,
        },
        `Contract_${new Date().getTime()}`
      );
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.formDisabled = false;
      this.getBelongingCompany();
      this.getlistContractParty();
      this.getlistContractCategorybyBelongingCompanyId(null);
      this.getListArchiveLocation();
      this.typeChange();
      this.AmountnotyetReceivedPaid =
        Number(this.contractForm.allMoney || 0) -
        Number(this.contractForm.paidPayment || 0);
      this.contractPartyNameList = [
        {
          value: "",
        },
      ];
      this.contractAppendicesNameList = [
        {
          name: "原文件",
        },
      ];
      // "新增按钮携带", this.contractForm;
      this.open = true;
    },
    //当输入框为空，设置vif
    inputBoxDetection(value) {},
    //修改页面数量
    getPageList() {},
    /** 查看按钮操作 */
    handleView(row) {
      this.formDisabled = true;
      this.reset();
      this.contractAppendicesNameList = [
        {
          name: "原文件",
        },
      ];
      // row;
      getContract(row.contract.contractId).then((res) => {
        // res;
        if (res.code == 200) {
          this.open = true;
          //合同form
          this.contractForm = res.data.contract;
          this.contractForm.belongingYear =
            this.contractForm.belongingYear.toString();
          //签约方列表
          if (res.data.contractPartyNameList.length == 0) {
            this.contractPartyNameList = [
              {
                value: "",
              },
            ];
          } else {
            this.contractPartyNameList = res.data.contractPartyNameList.map(
              (item, index) => ({
                value: item,
              })
            );
          }
          //附件列表
          this.contractAppendicesList = res.data.contractAppendicesList;
          //附件选择框
          this.contractAppendicesList.forEach((item, index) => {
            this.contractAppendicesNameList.push({
              name: "附件-" + index + 1,
            });
          });
          //pdf展示路径
          this.url =
            process.env.VUE_APP_BASE_API + res.data.contract.pdfAddress;
          //附件pdf展示初始化
          this.contractAppendicesList.forEach((item, index) => {
            this.urlList[index] =
              process.env.VUE_APP_BASE_API + item.pdfAddress;
            this.pdfStatusPage[index] = 1;
            this.urlList;
            this.nameList[index] = this.getFileByContractAppendicesList(
              this.urlList[index]
            );
          });
          //收付款计划列表
          this.paymentCollectionPlanList = res.data.paymentCollectionPlanList;
          //发票
          this.selectInvoiceVo = res.data.selectInvoiceVo;
          if (
            this.contractForm.collectionAndPaymentState === "已收款" ||
            this.contractForm.collectionAndPaymentState === "已付款"
          ) {
            this.collectionAndPaymentStateType = "success";
          } else if (
            this.contractForm.collectionAndPaymentState === "部分收款" ||
            this.contractForm.collectionAndPaymentState === "部分付款"
          ) {
            this.collectionAndPaymentStateType = "primary";
          } else if (
            this.contractForm.collectionAndPaymentState === "未收款" ||
            this.contractForm.collectionAndPaymentState === "未付款"
          ) {
            this.collectionAndPaymentStateType = "danger";
          }
          this.AmountnotyetReceivedPaid =
            Number(this.contractForm.allMoney || 0) -
            Number(this.contractForm.paidPayment || 0);
          this.getBelongingCompany();
          this.getlistContractParty();
          listContractCategorybyBelongingCompanyId(
            res.data.contract.belongingCompanyId
          ).then((res) => {
            // res;
            this.contractCategoriesList = res.data;
          });
          this.getlistContractParty();
          this.getListArchiveLocation();
          this.typeChange();
          this.image404 = false;
        }
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.formDisabled = false;
      this.reset();
      this.contractAppendicesNameList = [
        {
          name: "原文件",
        },
      ];
      // row;
      getContract(row.contract.contractId).then((res) => {
        // res;
        if (res.code == 200) {
          this.open = true;
          //合同form
          this.contractForm = res.data.contract;
          this.contractForm.belongingYear =
            this.contractForm.belongingYear.toString();
          //签约方列表
          if (res.data.contractPartyNameList.length == 0) {
            this.contractPartyNameList = [
              {
                value: "",
              },
            ];
          } else {
            this.contractPartyNameList = res.data.contractPartyNameList.map(
              (item, index) => ({
                value: item,
              })
            );
          }
          //附件列表
          this.contractAppendicesList = res.data.contractAppendicesList;
          //附件选择框
          this.contractAppendicesList.forEach((item, index) => {
            this.contractAppendicesNameList.push({
              name: "附件-" + index + 1,
            });
          });
          //pdf展示路径
          this.url =
            process.env.VUE_APP_BASE_API + res.data.contract.pdfAddress;
          //附件pdf展示初始化
          this.contractAppendicesList.forEach((item, index) => {
            this.urlList[index] =
              process.env.VUE_APP_BASE_API + item.pdfAddress;
            this.pdfStatusPage[index] = 1;
            this.urlList;
            this.nameList[index] = this.getFileByContractAppendicesList(
              this.urlList[index]
            );
          });
          //收付款计划列表
          this.paymentCollectionPlanList = res.data.paymentCollectionPlanList;
          //发票
          this.selectInvoiceVo = res.data.selectInvoiceVo;
          if (
            this.contractForm.collectionAndPaymentState === "已收款" ||
            this.contractForm.collectionAndPaymentState === "已付款"
          ) {
            this.collectionAndPaymentStateType = "success";
          } else if (
            this.contractForm.collectionAndPaymentState === "部分收款" ||
            this.contractForm.collectionAndPaymentState === "部分付款"
          ) {
            this.collectionAndPaymentStateType = "primary";
          } else if (
            this.contractForm.collectionAndPaymentState === "未收款" ||
            this.contractForm.collectionAndPaymentState === "未付款"
          ) {
            this.collectionAndPaymentStateType = "danger";
          }
          this.AmountnotyetReceivedPaid =
            Number(this.contractForm.allMoney || 0) -
            Number(this.contractForm.paidPayment || 0);
          this.getBelongingCompany();
          this.getlistContractParty();
          listContractCategorybyBelongingCompanyId(
            res.data.contract.belongingCompanyId
          ).then((res) => {
            // res;
            this.contractCategoriesList = res.data;
          });
          this.getlistContractParty();
          this.getListArchiveLocation();
          this.typeChange();
          this.image404 = false;
        }
      });
    },
    //表单验证测试
    submitContractForm() {
      //合同信息
      // "合同信息", this.contractForm;
      //合同附件信息
      // this.contractAppendicesList;
      //发票
      // this.selectInvoiceVo;
      //签约方
      // this.contractPartyNameList;
      const getContractPartyNameList = this.contractPartyNameList.map(
        (item) => item.value
      );
      //收付款计划
      // this.paymentCollectionPlanList;
      let form = {
        contract: this.contractForm,
        contractAppendicesList: this.contractAppendicesList,
        selectInvoiceVo: this.selectInvoiceVo,
        contractPartyNameList: getContractPartyNameList,
        paymentCollectionPlanList: this.paymentCollectionPlanList,
      };
      this.$refs["contractFormRef"].validate((valid) => {
        if (valid) {
          // ("1通过");
          const a = this.contractAppendicesList.some(
            (item) => item.name === ""
          );
          a;
          if (a == false) {
            if (this.contractForm.contractId == undefined) {
              // ("提交逻辑");
              // "提交用form", form;
              addContract(form).then((res) => {
                res;
                if (res.code == 200) {
                  this.open = false;
                  this.$modal.msgSuccess("新建成功");
                  this.getList();
                }
              });
            } else {
              // "修改逻辑", this.contractForm.contractId;
              // "修改用form", form;
              updateContract(form).then((res) => {
                res;
                this.open = false;
                this.$modal.msgSuccess("修改成功");
                this.getList();
              });
            }
          } else {
            this.$message({
              message: "请填写必填信息",
              type: "warning",
            });
          }
        } else {
          // ("1未通过");
          const a = this.contractAppendicesList.some(
            (item) => item.name === ""
          );
          // "1未通过下逻辑", a;
          return false;
        }
      });
    },
    /** 提交按钮 */
    // submitForm() {
    //   this.$refs["form"].validate((valid) => {
    //     if (valid) {
    //       if (this.form.contractId != null) {
    //         updateContract(this.form).then((response) => {
    //           this.$modal.msgSuccess("修改成功");
    //           this.open = false;
    //           this.getList();
    //         });
    //       } else {
    //         addContract(this.form).then((response) => {
    //           this.$modal.msgSuccess("新增成功");
    //           this.open = false;
    //           this.getList();
    //         });
    //       }
    //     }
    //   });
    // },
    /** 删除按钮操作 */
    handleDelete(row) {
      // row;
      let contractIds = null;
      if (row.contract) {
        contractIds = row.contract.contractId;
        this.$modal
          .confirm("此操作将永久删除，是否继续？")
          .then(function () {
            return delContract(contractIds);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      } else {
        if (this.ids.length == 0) {
          this.$message({
            message: "请选择条目",
            type: "warning",
          });
        } else {
          contractIds = this.ids.join(",");
          this.$modal
            .confirm("此操作将永久删除，是否继续？")
            .then(function () {
              return delContract(contractIds);
            })
            .then(() => {
              this.getList();
              this.$modal.msgSuccess("删除成功");
            })
            .catch(() => {});
        }
      }
    },
  },
};
</script>
<style scoped>
::v-deep .el-dialog {
  position: fixed;
  height: fit-content;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
  border-radius: 5px !important;
}
::v-deep .el-dialog__header {
  background-color: rgb(248, 250, 251); /* 你可以根据需求修改颜色 */
  color: rgb(99, 86, 110); /* 标题文字颜色 */
  border-radius: 5px !important;
}
::v-deep .el-dialog__body {
  max-height: calc(100vh - 150px);
  min-height: calc(100vh - 150px);
  overflow: auto;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  height: 8px; /* 设置水平滚动条的高度 */
}
.tit_box {
  display: flex;
  justify-content: start;
  align-items: center;
  .act_tit {
    position: relative;
    font-weight: 700;
    font-size: 16px;
    color: rgb(24, 144, 255);
    margin-right: 30px;
    cursor: pointer;
  }
  .act_tit::before {
    content: "";
    position: absolute;
    width: 42px;
    height: 3px;
    left: calc(50% - 21px);
    bottom: -5px;
    background-color: #1896fc;
  }
  .tit {
    position: relative;
    font-size: 16px;
    color: #6f6f6f;
    margin-right: 30px;
    cursor: pointer;
  }
}
.pdf-container {
  width: 100%;
  height: 600px; /* 可以根据需要调整高度 */
  overflow-y: auto; /* 超出时显示滚动条 */
}
/* 设置滚动条宽度 */
.pdf-container::-webkit-scrollbar {
  height: 8px; /* 设置水平滚动条的高度 */
}
.imageView {
  width: 100%; /* 可以根据需要调整 */
  height: 600px;
  overflow-y: auto;
  position: relative;
}
::v-deep .el-input__inner {
  height: 40px;
}
::v-deep .el-form-item__label {
  line-height: 20px;
}
::v-deep .el-form-item {
  margin-bottom: 18px;
}
.directionLeft {
  transform: scale(2);
  position: absolute;
  top: 45%;
  z-index: 999;
  left: 10px;
  cursor: pointer;
}
.directionRight {
  transform: scale(2);
  position: absolute;
  top: 45%;
  z-index: 999;
  right: 10px;
  cursor: pointer;
}
.bill {
  margin-top: 10px;
  white-space: nowrap;
  padding: 10px 8px;
  text-align: center;
  background-color: #f4f4f4;
  color: #fff;
  border-radius: 5px;
  margin-right: 20px;
  color: #5297f7;
  position: relative;
  display: flex;
  align-items: center;
}
.Mask {
  display: none !important;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  background-color: rgb(33, 38, 41);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: 5px;
  opacity: 0.8;
}
.bill:hover .Mask {
  display: flex !important;
}
.blueBox {
  background-color: #39f;
  width: 4px;
  height: 20px;
  margin-right: 10px;
  border-radius: 3px;
}
::v-deep .el-upload-list__item {
  border: 1px solid #ccc; /* 设置边框 */
  margin-left: 20px;
  width: calc(85%);
  border-radius: 4px; /* 可选：为边框添加圆角 */
}
/* 当达到最大长度时，计数器颜色变为红色 */
.input-limit-reached ::v-deep .el-input__count {
  color: red !important;
}
</style>
